<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { downloadAuthTemplate, useEditEnterpriseName, useGetEnterpriseInfo } from '@fl/api/supplier'
import FlUpload from '@fl/components/fl-upload.vue'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { cloneDeep } from 'lodash-es'

const router = useRouter()

const initialState = {
    idCardBackList: [],
    idCardFrontList: [],
    letterList: [],
    newLicenseList: [],
} as any
const state = ref(cloneDeep(initialState))

const { data: enterpriseInfoData, isLoading: isGetEnterpriseInfoLoading } = useGetEnterpriseInfo()
const { isPending: isEditEnterpriseNamePending, mutate: editEnterpriseName } = useEditEnterpriseName()

// #region Form
const isFormLoading = computed(() => isGetEnterpriseInfoLoading.value)
const isSubmitLoading = computed(() => isEditEnterpriseNamePending.value)

const columns: PlusColumn[] = [
    {
        label: '企业名称',
        prop: 'enterpriseName',
        valueType: 'copy',
    },
    {
        label: '最新营业执照',
        prop: 'newLicenseList',
    },
    {
        label: '授权函',
        prop: 'letterList',
    },
    {
        label: '办理人身份证正面',
        prop: 'idCardFrontList',
    },
    {
        label: '办理人身份证反面',
        prop: 'idCardBackList',
    },
]

const rules = {
    enterpriseName: [
        {
            message: '请输入企业名称',
            required: true,
            trigger: 'change',
        },
    ],
    idCardBackList: [
        {
            message: '请上传办理人身份证反面',
            required: true,
            trigger: 'change',
        },
    ],
    idCardFrontList: [
        {
            message: '请上传办理人身份证正面',
            required: true,
            trigger: 'change',
        },
    ],
    letterList: [
        {
            message: '请上传授权函',
            required: true,
            trigger: 'change',
        },
    ],
    newLicenseList: [
        {
            message: '请上传最新营业执照',
            required: true,
            trigger: 'change',
        },
    ],
}
// #endregion

// #region UI Listener
function onBackBtnClick() {
    router.back()
}

function submit() {
    const data = cloneDeep(state.value)
    editEnterpriseName({
        ...data,
        idCardBack: JSON.stringify(data.idCardBackList?.[0] || {}),
        idCardBackList: undefined,
        idCardFront: JSON.stringify(data.idCardFrontList?.[0] || {}),
        idCardFrontList: undefined,
        letter: JSON.stringify(data.letterList?.[0] || {}),
        letterList: undefined,
        newLicense: JSON.stringify(data.newLicenseList?.[0] || {}),
        newLicenseList: undefined,
    }, {
        onSuccess() {
            ElMessage.success('操作成功')
            router.push({ path: '/supplier-pages/enterprise-management/certification' })
        },
    })
}

async function onDownloadTemplateBtnClick() {
    try {
        await downloadAuthTemplate()
        ElMessage.success('下载成功')
    }
    catch (error) {
        ElMessage.error('下载失败')
    }
}
// #endregion

watchEffect(() => {
    if (enterpriseInfoData.value) {
        Object.assign(state.value, {
            enterpriseId: enterpriseInfoData.value.enterpriseId,
            enterpriseName: enterpriseInfoData.value.enterpriseName,
        })
    }
    else {
        state.value = cloneDeep(initialState)
    }
})
</script>

<template>
    <el-skeleton v-if="isFormLoading"
                 animated
    />

    <el-card v-else
             shadow="never"
    >
        <div class="mb-20 text-14 font-700">
            企业信息变更
        </div>

        <PlusForm v-model="state"
                  :columns="columns"
                  :rules="rules"
                  label-width="150"
                  @submit="submit"
        >
            <template #plus-field-newLicenseList>
                <FlUpload v-model="state.newLicenseList"
                          tips
                          accept=".jpg,.jpeg,.png"
                />
            </template>

            <template #plus-field-letterList>
                <FlUpload v-model="state.letterList"
                          tips
                          accept=".docx"
                          list-type="text"
                />

                <div>
                    下载
                    <span class="text-[#6C87F9] cursor-pointer"
                          @click="onDownloadTemplateBtnClick"
                    >
                        《授权函模板》
                    </span>
                </div>
            </template>

            <template #plus-field-idCardFrontList>
                <FlUpload v-model="state.idCardFrontList"
                          tips
                          accept=".jpg,.jpeg,.png"
                />
            </template>

            <template #plus-field-idCardBackList>
                <FlUpload v-model="state.idCardBackList"
                          tips
                          accept=".jpg,.jpeg,.png"
                />
            </template>

            <template #footer="{ handleSubmit }">
                <div style="margin: 0 auto">
                    <el-button @click="onBackBtnClick">
                        返回
                    </el-button>

                    <SubmitBtn type="primary"
                               :loading="isSubmitLoading"
                               @click="handleSubmit"
                    >
                        提交
                    </SubmitBtn>
                </div>
            </template>
        </PlusForm>
    </el-card>
</template>
